.tile-menu-wrapper {
}

.label-area-wrapper {
}

.label-area {
  position: relative;
  font-size: 28px;
  padding: 10px 10px;
  color: $colorWhite;

  &.raised-z-index {
    z-index: zindex($zLayout, overlay);
  }

  .clickable-text {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s ease-in-out, transform 1.2s ease-out;

    &.active {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .clickable-indicator {
    position: absolute;
    top: 50%;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    background-color: $colorWhite;
    &-before {
      left: -18px;
    }
    &-after {
      right: -18px;
    }

    &::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      left: 50%;
      top: 50%;
      border: 1px solid white;
      transform: translate(-50%, -50%) scale(1);
      :global {
        animation: 1.2s infinite pulse-indicator;
      }
    }
  }
}

.foreground-image {
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
  height: 90%;

  &.full-dimensions {
    top: -5%;
    left: 0;
    width: 100%;
    height: 110%;
  }
}
